<template>
	<view class="container">
		<nav-bar :title="params.title"></nav-bar>
		<view class="search-content">
			<view class="search-box">
				<u-search
					v-model="searchValue"
					shape="round"
					:showAction="false"
					:placeholder="params.placeholder"
					bgColor="#F8F8F8"
					@search="searchSubmit"
					@custom="searchSubmit"
					@clear="clearInput"
				></u-search>
				<view class="search-btn" @click="searchSubmit(searchValue)">搜索</view>
			</view>
		</view>
		<view class="history-box" v-if="showHistoryBox">
			<view class="history-title">
				<view class="title">搜索历史</view>
				<view class="delete" @click="clickDeleteAll">清除</view>
			</view>
			<view class="history-list">
				<view
					class="history-item"
					v-for="(item, index) in historyList"
					:key="index"
					@click="clickHistoryItem(item)"
				>{{ item }}</view>
			</view>
		</view>
		<slot name="searchContent" :mainHeight="mainHeight"></slot>
	</view>
</template>

<script>
	export default {
		name: 'SearchPage',
		data() {
			return {
				mainHeight: '',
				searchValue: '',
				historyList: []
			}
		},
		props: {
			params: {
				type: Object,
				default: {}
			},
			showHistoryBox: {
				type: Boolean,
				default: true
			},
			storageName: {
				type: String,
				default: ''
			},
			isAllData: {
				type: Boolean,
				default: false
			},
			isRequestSuccess: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			params: {
				handler(newVal, oldVal) {
					this.searchValue = newVal.searchValue
					if (this.searchValue) {
						let historyData = uni.getStorageSync(this.storageName) || []
						historyData.includes(this.searchValue) ? historyData : historyData.unshift(this.searchValue)
						uni.setStorageSync(this.storageName, historyData)
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {
			const historyData = uni.getStorageSync(this.storageName)
			if (historyData && historyData.length) {
				this.historyList = historyData
			}
			this.$nextTick(() => {
				this.observeBoxHeight()
			})
		},

		methods: {
			observeBoxHeight() {
				const observer = uni.createIntersectionObserver(this)
				observer
					.relativeTo('.container')
					.observe('.history-box', res => {
						this.mainHeight = this.$store.getters.heightData.noTabMainHeight - res.boundingClientRect.height - 76
					})
			},
			searchSubmit(value) {
				if (!value) return this.$emit('searchSubmit', value)
				let historyData = uni.getStorageSync(this.storageName) || []
				historyData.includes(value) ? historyData : historyData.unshift(value)
				uni.setStorageSync(this.storageName, historyData)
				this.historyList = historyData
				this.$emit('searchSubmit', value)
			},
			clickDeleteAll() {
				uni.removeStorageSync(this.storageName)
				this.historyList = []
			},
			clickHistoryItem(item) {
				this.searchValue = item
				this.$emit('searchSubmit', item)
			},
			clearInput() {
				this.searchValue = ''
				this.$emit('clearInput')
			},
			// 下拉刷新
      onRefresh() {
				this.$emit('onRefresh')
      },
      // 上拉加载
      loadMore() {
				this.$emit('loadMore')
      }
		}
	}
</script>
<style lang="scss" scoped>
	.search-content {
		height: 76px;
		padding: 0 35rpx;
		line-height: 76px;
		background-color: #FFF;
		.search-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			margin-bottom: 30rpx;
			padding: 0 10rpx;
			border-radius: 80rpx;
			background-color: #F8F8F8;
			.search-btn {
				width: 120rpx;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				text-align: center;
				color: #FFF;
				background-color: #115BAA;
			}
		}
	}
	.history-box {
		background-color: #FFF;
		.history-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 0 35rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #999;
		}
		.history-list {
			padding: 0 30rpx 25rpx ;
			display: flex;
			flex-wrap: wrap;
			.history-item {
				margin: 10rpx 14rpx;
				padding: 0 33rpx;
				height: 60rpx;
				border-radius: 8rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				color: #333;
				background-color: #F8F8F8;
			}
		}
	}
</style>